<template>
  <view>
    <view class="count-d-block">
      
      <view class="coin-award" v-if="isViewCoinTip">
        <image :src="staticHost + '/coin_yuan.png'" class="coin-ico" mode="aspectFill"></image>
        <view class="awardtxt">+{{money}}</view>
      </view>
      <view class="upload-ing">
        <view class="circleProgress_wrapper">
          <view class="wrapper right">
            <view ref="rightcircle" :class="['circleProgress rightcircle',activeCirani? 'is-runing' :'is-stop']" 
              :style="{ transform: `rotate(${process})`, animationPlayState: pauseCirani ? 'paused':'' }"
            ></view>
          </view>
          <view class="wrapper left">
            <view ref="leftcircle" :class="['circleProgress leftcircle', activeCirani? 'is-runing' :'is-stop']" 
              :style="{ transform: `rotate(${process2})`, animationPlayState: pauseCirani ? 'paused':'' }"
              @animationend="animationEnded"
            ></view>
          </view>
        </view>
         <image :src="staticHost +'/video_csy.png'" class="center-ico" mode="aspectFill"></image>
      </view>
      <view class="view-text" @click="showTaskPop">
        <text class="e-txt" >去提现</text>
      </view>
    </view>

    <!-- 金币兑现金，额度不够提示 -->
    <u-popup
      v-model="isVisibleCoinNotEnough"
      class="rec-bag-pop"
      :border-radius="12"
      mode="center"
      :mask-custom-style="{background: 'rgba(0, 0, 0, 0.6)'}"
      :mask-close-able="true"
      z-index="10081"
      @close="isVisibleCoinNotEnough=false"
    >
      <view :class="['relative', isMpKuaishou ? 'ks-rec-dia' : '']" style="padding-bottom:100rpx;">
        <image :src="staticHost + '/video_pop_bg.png'" mode="widthFix" style="width:600rpx;"></image>
        
        <view class="absolute" style="top:0;width:100%;padding:56rpx 48rpx 0;text-align: center;">
          <view class="font20 font-b">再得<text style="color:#FF282D;">{{ goldDifference }}</text>金币可兑换现金</view>
          <image :src="staticHost + '/video_jubaodai.png'" mode="widthFix" style="width:356rpx;"></image>
        </view>
        <button class="pop-rec-btn linear" @tap="isVisibleCoinNotEnough = false">继续做任务</button>
        <image class="close-ico" :src="staticHost + '/video_pop_close.png'" mode="widthFix" @click="isVisibleCoinNotEnough = false"></image>
      </view>
    </u-popup>

    <!-- 任务及账户余额 -->
    <u-popup
      v-model="isVisibleTaskPop"
      mode="bottom"
      :mask-close-able="isTaskPopMaskCloseable"
      width="100%"
      border-radius="48"
      height="auto"
      z-index="10080"
      @close="closeTaskpopEv"
    >
      <view class="box-wp">
        <view class="head-wp">
          <view class="flex-1">
            <view class="head-row">
              我的金币
              <view class="my-coins">
                <image :class="['coin-img', (toCashIndex > idx && toCashing) ? 'is-move':'']" v-for="idx in 9" :key="idx"
                  :src="staticHost + '/video_gold_coin.png'" :style="{zIndex: idx+1}"
                ></image>
                <image class="coin-img" :src="staticHost + '/video_gold_coin.png'" style="z-index: 13;"></image>
              </view>
            </view>
            <view class="flex items-center">
              <text style="font-size:44rpx;color:#FF282D;font-weight:500;margin-right:6rpx;">
                {{currentCoin}}
              </text>
              <button class="red-bg-btn" style="margin-left:12rpx;" @click="coinToCash">换现金</button>
            </view>
          </view>
          <view class="flex-1" style="padding-left:60rpx;">
            <view class="head-row">
              我的现金
            </view>
            <view class="flex items-center">
              <view style="color:#FF282D;margin-right:12rpx;" class="flex items-baseline">
                <text style="font-size:44rpx;font-weight:500;margin-right:6rpx;">
                  {{currentCash}}
                </text>
                <text>元</text>
              </view>
              <button class="tx-btn" @click="toWithdraw">
                <image :src="staticHost + '/wf_zfb_bg_white.png'" mode="widthFix" style="min-width:28rpx;width:28rpx;height:28rpx;"></image>
                <text class="font12" style="margin: 0 6rpx;">提现</text>
                <image :src="staticHost + '/arrow_r_fff.png'" mode="widthFix" style="width:24rpx;"></image>
              </button>
            </view>
          </view>
        </view>
        <view :class="['task-wrr', isAfterSecond ? 'after-second':'' ]">

          <block v-for="item in taskList" :key="item.id">
            <view class="task-item" v-if="visibleTaskItem(item)" >
              <image class="type-img" :src="item.typeImg"></image>
              <view class="flex-1" style="overflow:hidden;">
                <view class="t-tit">{{item.name}}</view>

                <view v-if="[1,2].includes(item.id)" class="cor-grey font12">
                  {{item.remarker}} <text v-if="item.start">还差</text>
                </view>
                <view v-else-if="item.id == 3" class="cor-grey font12">
                  {{item.remarker}} <text>{{cardTimes}}/{{item.times}}</text>
                </view>
                <view v-else-if="item.id == 4" class="cor-grey font12">
                  {{item.remarker}} <text>{{item.jobViews}}/{{item.times}}</text>
                </view>
                <view v-else-if="item.id == 5" class="cor-grey font12">
                  {{item.remarker}} <text>{{gameTimes}}/{{item.times}}</text>
                </view>
                <view v-else-if="6 == item.id" class="cor-grey font12">已报名 {{ accountInfo.activityDaily.jobs||0 }}/{{item.times}}</view>
                <view v-else-if="7 == item.id" class="cor-grey font12">已浏览 {{ accountInfo.activityDaily.jobViews||0 }}/{{item.times}}</view>
              </view>

              <button v-if="item.id == 1" :class="['red-bg-btn', isFinishThreeWatch ? 'is-done' :'']" @click="clickTask(item)">
                <block v-if="isFinishThreeWatch">已完成</block>
                <block v-else>
                  {{onlineObj[`threeViewTxt`] ? onlineObj[`threeViewTxt`] : '去完成'}}
                </block>
              </button>
              <button v-else-if="item.id == 2" :class="['red-bg-btn', isFinishTenWatch ? 'is-done' :'']" @click="clickTask(item)">
                <block v-if="isFinishTenWatch">已完成</block>
                <block v-else>
                  {{onlineObj[`tenViewTxt`] ? onlineObj[`tenViewTxt`] : '去完成'}}
                </block>
              </button>
              <button v-else-if="item.id == 3" :class="['red-bg-btn', getCardStatus(item) ? 'is-done' :'']" @click="clickTask(item)">
                {{cardTimes>=3? '已完成' : '打卡'}}
              </button>
              <button v-else-if="item.id == 4" :class="['red-bg-btn', item.jobViews >= item.times ? 'is-done' :'']" @click="clickTask(item)">
                {{item.jobViews >= item.times? '已完成' : '去完成'}}
              </button>
              <button v-else :class="['red-bg-btn', item.finished ? 'is-done':'']" @click="clickTask(item)">{{ item.finished ? '已完成' : '去完成'}}</button>
            </view>
          </block>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { staticHost } from '@/setting';
import { formatCountdown } from '@/utils/util'
import { TransCoinToCash, FinishTask } from '../api/index'
import { isH5, isMpAlipay, isMpKuaishou } from '@/utils/platform'
// import IncreaseNum from './IncreaseNum'
// import anime from 'animejs';

let count = 0;
const app = getApp();
export default {
  components: {
    // IncreaseNum
  },
  props: {
    golds: {
      type: [Number, String],
      default: 0,
    },
    accountInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  computed: {
    currentCoin() {
      if (this.animateCoin) {
        return this.animateCoin;
      }
      return this.beginCoin
    },
    currentCash() {
      if (this.animateCash) {
        return this.animateCash;
      }
      return this.beginCash
    },
    isFinishThreeWatch() {
      if (this.accountInfo?.activityDaily?.threeView) {
        return true;
      }
      return false;
    },
    isFinishTenWatch() {
      if (this.accountInfo?.activityDaily?.tenView) {
        return true;
      }
      return false;
    },
    cardTimes() {
      return this.accountInfo?.activityDaily?.cardTimes || 0;
    },
    gameTimes() {
      return this.accountInfo?.activityDaily?.gameTimes || 0
    },
    isAfterSecond() {
      let d = this.accountInfo?.activityDaily?.ftimes
      if (d && d > 2) {
        return true;
      }
      return false;
    },
    goldDifference() {
      let curGolds = this.accountInfo?.balGolds || 0;
      if (curGolds >= 5000) {
        return 0;
      } else {
        return 5000 - curGolds;
      }
    }
  },
  watch: {
    accountInfo(newVal, oldVal) {
      this.updateHandler(newVal, oldVal)
    }
  },
  data() {
    return {
      staticHost,
      isVisibleTaskPop: false,
      isViewCoinTip: false,
      activeCirani: false,
      pauseCirani: false,
      isVisibleCoinNotEnough: false,
      isMpKuaishou,
      
      onlineObj: {
        threeView: 0,
        threeViewTxt: '',
        tenView: 0,
        tenViewTxt: '',
      },

      beginCoin: 0,
      animateCoin: 0,
      beginCash: 0,
      animateCash: '0.00',
      toCashIndex: 0,
      toCashing: false,
      
      point: 0,
      process: '-135deg', // 进度
      process2: '-135deg', // 进度
      isTaskPopMaskCloseable: true,
      money: 0,
      taskList: [],
      progressTask: []
    };
  },
  created() {
    count = 0;
    if (this.accountInfo.id) {
      this.updateHandler(this.accountInfo, this.accountInfo)
    }
    let cash = this.accountInfo.balAmount || 0;
    this.beginCash = Number(cash / 100).toFixed(2);
    this.beginCoin = this.accountInfo.balGolds || 0;
  },
  beforeDestroy() {
    console.log('before Destroey');
    this.threeViewTimerClear();
    this.tenViewTimerClear();
  },
  options: {
    styleIsolation:'shared'
  },
  methods: {
    visibleTaskItem(item) {
      let jobViews = this.accountInfo?.activityDaily?.jobViews || 0;
      let findex = this.accountInfo?.activityDaily?.findex || 1;

      if (item.id == 6) {
        if (findex == 1 && jobViews<3) {
          return false;
        }
      }
      return true;
    },
    updateHandler(newVal, oldVal) {
      
      console.log('newVal.balAmount > ', newVal.balAmount, oldVal.balAmount);
      if (newVal.balAmount != oldVal.balAmount) {
        let cash = newVal.balAmount || 0;
        let cashObj = { beginCash: this.beginCash }
        console.log('accountInfo cashObj >> ', cashObj);
        this.numberChange({
          targets: cashObj,
          field: 'beginCash',
          beginCash: Number(cash/100).toFixed(2),
          duration: 1800,
          update: () => {
            // console.log('update cashObj>> ', cashObj);
            this.beginCash = this.animateCash = cashObj.beginCash.toFixed(2);
          }
        })
      }

      if (newVal.balGolds != oldVal.balGolds) {
        let endCoin = newVal.balGolds || 0;
        let coinObj = { beginCoin: this.beginCoin }
        this.numberChange({
          targets: coinObj,
          field: 'beginCoin',
          beginCoin: endCoin,
          duration: 2100,
          update: () => {
            this.beginCoin = this.animateCoin = parseInt(coinObj.beginCoin);
          }
        });
      }

      if (newVal.taskList && newVal.taskList.length) {
        let taskList = [];
        newVal.taskList.forEach(el => {
          let newOl = Object.assign({}, el);
          if (newOl.id == 6) {
            newOl.type = 1;
            newOl.detailId = 100;
            newOl.typeImg = staticHost + '/video_sf_3.png'
            if (newVal.activityDaily.jobs) {
              newOl.finished = newVal.activityDaily.jobs;
            }
          } else if (newOl.id == 7) {
            newOl.type = 3;
            newOl.detailId = 200;
            newOl.typeImg = staticHost + '/video_sf_5.png'
            if (newVal.activityDaily.jobViews >= 3) {
              newOl.finished = newVal.activityDaily.jobViews;
            }
          } else if (newOl.id == 4) {
            newOl.type = 3;
            newOl.detailId = 200;
            newOl.typeImg = staticHost + '/video_sf_5.png'
            newOl.jobViews = newVal.activityDaily.jobViews || 0;
          } else if (newOl.id == 1) {
            newOl.typeImg = staticHost + '/video_sf_2.png'
          } else if (newOl.id == 2) {
            newOl.typeImg = staticHost + '/video_sf_2.png'
          } else if (newOl.id == 3) {
            newOl.typeImg = staticHost + '/video_sf_1.png'
          } else if (newOl.id == 5) {
            newOl.typeImg = staticHost + '/video_sf_4.png'
          } 
          taskList.push(newOl)
        });
        this.taskList = taskList
      }

      if (newVal.activityDaily) {
        count = newVal.activityDaily.circles
        //   let obj = Object.assign({}, newVal.activityDaily) 
        //   this.updateCircleArr(obj)
      }
      
      if (newVal.recieved) {
        let maxCount = this.isAfterSecond ? 100 : 34;
        console.log('recieved  maxCount> ' , count, maxCount);
        if (count < maxCount) {
          this.startAni();
        }
      }
    },
    updateCircleArr(dailyDetail) {
      let cmped = dailyDetail.circles;
      let arr = [];
      // 前两天逻辑
      if (dailyDetail.ftimes <= 2) {

        // 前4圈，每圈+0.5，后10圈每圈0.1，最后20圈每圈0.05
        for (let i = 1; i <= 34; i++) {
          if (i >= cmped) {
            if (i <= 4) {
              arr.push({
                money: '0.5',
              })
            } else if (i <= 14) {
              arr.push({
                money: '0.1',
              })
            } else if (i <= 34) {
              arr.push({
                money: '0.05',
              })
            }
          } 
        }
      } else {
        // 两天后逻辑 前20圈，每圈+600，后20圈每圈400，最后40圈每圈50
        for (let i = 1; i <= 100; i++) {
          if (i >= cmped) {
            if (i <= 20) {
              arr.push({
                unit: '金币',
                money: '600',
              })
            } else if (i <= 40) {
              arr.push({
                unit: '金币',
                money: '400',
              })
            } else if (i <= 60) {
              arr.push({
                unit: '金币',
                money: '200',
              })
            } else if (i <= 100) {
              arr.push({
                unit: '金币',
                money: '50',
              })
            }
          } 
        }
      }
      this.progressTask = arr
    },
    async animationEnded(ev) {
      let maxCount = this.isAfterSecond ? 100 : 34;
      console.log('maxCount> ' , count, maxCount);
      if (this.pauseCirani) {
        return;
      }
      
      setTimeout(() => {
        this.stopAni();
        setTimeout(() => {
          if (count < maxCount) {
            this.startAni()
          }
        }, 300)
      }, 300)

      if (count <= maxCount - 1) {
        let res = await this.finishTask(8)
        if (res.code == 200 && res.data) {
          
          // let result = arr[count]
          let result = res.data;
          if (result) {
            count = result.circles;
            if (result.addAmount > 0) {
              if (result.accoutType == 2) {
                result.addAmount = (result.addAmount / 100).toFixed(2) + '元'
              } else {
                result.addAmount = result.addAmount + '金币'
              }
              this.money = result.addAmount
              this.showCoinTip();
            }
          }
        }
        
        // 最后一次进行提示
        let ftimes = this.accountInfo?.activityDaily?.ftimes; // 第几天
        if (count == maxCount) {
          if (ftimes == 1 || ftimes == 2) {
            this.$emit('showAwardFinishTip')
          }
        }
      }
    },
    async finishTask(typeId) {
      let res = await FinishTask({
        typeId
      })
      return res;
    },
    toWithdraw() {
      this.$navigateTo('/pages/welfare/videoWithdrawal')  
    },
    getCardStatus() {
      if (this.cardTimes>=3) {
        return true;
      } else {
        let latestCardTime = uni.getStorageSync('latestCardTime');
        if (latestCardTime) {
          let userId = this.accountInfo?.activityDaily?.userId;
          
          let arr = latestCardTime.split('_')
          let uid = arr[1]
          latestCardTime = arr[0]
          console.log('latestCardTime> ', latestCardTime, userId, uid);
          if (uid == userId) {
            let now = new Date().getTime();
            let diff = (now - latestCardTime) / 1000 / 60;
            if (this.cardTimes <3 && diff < 60) {
              return true;
            }
          }
        }
      }
      return false;
    },
    clickTask(item) {
      let { id, type, detailId, fmin, accoutType, amount } = item;
      // type: 1 || 3
      if (id == 6 || id == 7) {
        if (item.finished) {
          return;
        }
        // 报名/浏览岗位
        let params = `type=${type}&maxTimes=${15}&detailId=${detailId}&accoutType=${accoutType}&amount=${amount}`
        this.$navigateTo(`/pages/welfare/videoJobs?${params}`)
      } else if (id == 1 || id == 2) {
        // 浏览视频3分钟或10分钟
        let seconds = fmin * 60;
        // seconds = 38;

        let field;
        if (id == 2) {
          field = 'tenView'
          if (this.isFinishTenWatch) {
            return;
          }
        } else {
          field = 'threeView';
          if (this.isFinishThreeWatch) {
            return;
          }
        }
        let num = this.onlineObj[field]
        console.log(seconds, field, num);
        if (num >0 || num == seconds) {
          return
        }
        this.onlineObj[field] = seconds;
        this.onlineObj[`${field}Txt`] = `${formatCountdown(Math.ceil(seconds))}`;
        this.startTaskCountdown(field, () => {
          this.finishTask(id).then(res => {
            this.$emit('getAccout')
          })
        })
      } else if (id == 3) {
        this.finishTask(id).then(res => {
          if (res.code == 200) {
            this.$emit('getAccout')
            this.$showToast('提示打卡成功，1小时后再来')
            let userId = this.accountInfo?.activityDaily?.userId;
            let now = new Date().getTime()
            uni.setStorageSync('latestCardTime', `${now}_${userId}`);
          }
        })
      } else if (id == 4) {
        // 浏览职位
        if (item.jobViews >= item.times) {
          return;
        }
        // 报名/浏览岗位
        let params = `type=3&maxTimes=${15}&detailId=${detailId}&accoutType=${accoutType}&amount=${amount}`
        this.$navigateTo(`/pages/welfare/videoJobs?${params}`)
      }
    },
    startTaskCountdown(field, callback) {
      let mxNumber = this.onlineObj[field]
      let fieldTxt = field + 'Txt';
      let timerTxt = field + 'Timer'
  
      let clearnFn = field + 'TimerClear';

      // if (field == 'threeView') {
        
      //   this.threeViewTimerClear();
      // } else {
      //   this.tenViewTimerClear()
      // }
      let func = this[clearnFn]
      if (typeof func == 'function') {
        func();
      }
      
      this[timerTxt] = setInterval(() => {
        if (mxNumber) {
          mxNumber = mxNumber - 1;
        } else {
          mxNumber = 0;
        }
        mxNumber = mxNumber <= 0 ? 0 : mxNumber;
        console.log('xxx > ', mxNumber, fieldTxt);

        this.onlineObj[fieldTxt] = `${formatCountdown(Math.ceil(mxNumber))}`
        if (mxNumber <=0) {
          if (typeof func == 'function') {
            func();
          }
          setTimeout(() => {
            this.onlineObj[fieldTxt] = '';
            callback && callback();
          }, 500)
        }
        this.onlineObj[field] = mxNumber;
      }, 1000)
    },
    coinToCash() {
      let curGolds = this.accountInfo?.balGolds || 0;
      console.log('curGolds>>> ', curGolds);
      
      if (curGolds >= 5000) {
        if (this.toCashing) {
          return;
        }
        this.toCashing = true;

        TransCoinToCash({
          id: this.accountInfo.activityDaily.id
        }).then(res => {
          if (res.code == 200) {
            this.coin2ToCashAnimation();
          }
        })
      } else {
        this.isVisibleCoinNotEnough = true;
      }
    },
    coin2ToCashAnimation() {
      let _self = this;
      let maxTms = 9;
      let num = 1;

      let setKls = function () {
        if (num <= maxTms) {
          _self.toCashIndex = num
          
          setTimeout(() => {
            setKls();
          }, 140);
        } else {
          setTimeout(() => {
            _self.toCashing = false;
            _self.toCashIndex = 0;
          }, 1000);
          _self.$emit('getAccout')
        }
        num++;
      }
      setKls(maxTms)
    },
    // async runCoinAnimate(endCoin, endCash) {
    //   let cashObj = { beginCash: this.beginCash }
    //   let coinObj = { beginCoin: this.beginCoin }
    //   this.numberChange({
    //     targets: coinObj,
    //     field: 'beginCoin',
    //     beginCoin: endCoin,
    //     duration: 2100,
    //     update: () => {
    //       this.beginCoin = this.animateCoin = parseInt(coinObj.beginCoin);
    //     }
    //   });
    //   this.numberChange({
    //     targets: cashObj,
    //     field: 'beginCash',
    //     beginCash: endCash,
    //     duration: 2100,
    //     update: () => {
    //       this.beginCash = this.animateCash = cashObj.beginCash.toFixed(2);
    //     }
    //   })
    // },
    numberChange(params) {
      let start = Number(params.targets[params.field])
      let end = Number(params[params.field]);
      
      let diff = Math.abs(start - end);
      if (diff == 0) {
        return
      }

      let maxTm = params.duration / 100;
      let gap = diff / maxTm; 
      console.log(start, end, gap, maxTm);

      let timer = setInterval(() => {
        if(start > end){
          params.targets[params.field] = start = start - gap;
          if (start <= end ) {
            params.targets[params.field] = start = end;
            clearInterval(timer)
          }
        } else {
          params.targets[params.field] = start = start + gap;
          if (start >= end ) {
            params.targets[params.field] = start = end;
            clearInterval(timer)
          }
        }
        params.update()
      }, 100)
    },
    showCoinTip() {
      this.isViewCoinTip = true;
      setTimeout(() => {
        this.isViewCoinTip = false;
      }, 3000)
    },
    playAniEv() {
      console.log('exec playAniEv');
      if (this.isVisibleTaskPop) {
        return;
      }
      this.pauseCirani = false;
    },
    pauseAniEv() {
      console.log('exec pauseAniEv');
      this.pauseCirani = true;
    },
    stopAni() {
      this.activeCirani = false;
    },
    startAni() {
      this.activeCirani = true;
    },
    // start() {
    //   // 开启倒计时
    //   let p = 0;
    //   this.clearCountdownTimer();
    //   this.countTimer = setInterval(() => {
    //     this.point++;
    //     p = this.point / this.maxCount;

    //     console.log('p>> ', p);
    //     if (p > 0) {
    //       if (p > 0.5) {
    //         this.process = '45deg';
    //         p = p - 0.5;
    //         this.process2 = -135 + p * 2 * 180 + 'deg';
    //       } else if (p >= 1) {
    //         this.process = '-135deg';
    //         this.process2 = '-135deg';
    //       } else {
    //         this.process = -135 + p * 2 * 180 + 'deg';
    //         this.process2 = '-135deg';
    //       }
    //     }
    //     if (this.point >= this.maxCount) {
    //       this.point = 0;
    //       this.finishPreview();
    //       return;
    //     }
    //   }, 1000);
    // },
    threeViewTimerClear() {
      this.threeViewTimer && clearInterval(this.threeViewTimer);
    },
    tenViewTimerClear() {
      this.tenViewTimer && clearInterval(this.tenViewTimer);
    },
    finishPreview() {
      // let applyId = this.detail.applyId
      // CmpJobView({
      //   id: this.signId
      // }).then(res => {
      // })
    },
    showTaskPop() {
      // if (this.accountInfo?.activityDaily?.ftimes >= 3) {
      //   let tixianThan3 = uni.getStorageSync('tixianThan3');
      //   let today = dateFormat('YYYY-mm-dd', new Date()) 
      //   console.log('today>> ', today);
      // }
      this.$emit('showTaskPop')
      this.isVisibleTaskPop = true;
      this.pauseAniEv()
    },
    closeTaskpopEv() {
      this.isVisibleTaskPop = false;
      this.playAniEv()
      this.$emit('hideTaskPop')
    },
    yes() {
      this.isVisible = false;
      this.$emit('toApplyEv');
    },
  },
};
</script>
<style lang="scss" scoped>
$onlin_cic_lt_color:#FEC601;

.pop-rec-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 156rpx;
  margin: 0 auto;

  width: 400rpx;
  height: 84rpx;
  line-height: 84rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 32rpx;
  text-align: center;
  background: linear-gradient( 79deg, #FF282D 0%, #FF752B 100%);
}

.close-ico {
  width: 72rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
}

.count-d-block {
  position: fixed;
  top: 200rpx;
  right: 26rpx;
  z-index: 10;

  .coin-award {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;

    font-size: 26rpx;
    color: $onlin_cic_lt_color;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: coinAni 3.3s linear;
    // transform: translateY(-20px);
    width: auto;

    .coin-ico {
      width: 32rpx;
      min-width: 32rpx;
      height: 32rpx;
      margin-right: 6rpx;
    }
    .awardtxt {
      word-break: keep-all;
    }
  }

  .upload-ing {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    // background: grey;
    object-fit: cover;
    border-radius: 10px;

    .center-ico {
      position: absolute;
      margin: 0 auto;
      width:80rpx;
      height:80rpx;
    }
  }

  .view-text {
    position: absolute;
    bottom: -4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    width: 52px;
    margin-left: 4px;
    height: 20px;
    line-height: 20px;
    border-radius: 11px;
    background: linear-gradient( 90deg, #FF282D 0%, #FF752B 100%);
    .e-txt {
      display: inline-block;
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
    }
  }

  .circleProgress_wrapper {
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto;
    position: relative;
  }
  .wrapper {
    width: 50rpx;
    height: 100rpx;
    position: absolute;
    top: 0;
    overflow: hidden;
  }
  .right {
    right: 0;
  }
  .left {
    left: 0;
  }

  .circleProgress {
    width: 100rpx;
    height: 100rpx;
    border: 4px solid #666;
    position: absolute;
    top: 0;
    border-radius: 50%;
    transform: rotate(-135deg);
    background: #000000;
  }
  .rightcircle {
    border-top: 4px solid $onlin_cic_lt_color;
    border-right: 4px solid $onlin_cic_lt_color;
    right: 0;
    // animation-play-state: paused;
    &.is-runing {
      animation: circleProgressLoad_right 10s linear ;
      animation-fill-mode: forwards;
    }
    &.is-stop {
      transform: rotate(45deg) !important;
      -webkit-transform: rotate(45deg)!important;
    }
  }
  .leftcircle {
    border-bottom: 4px solid $onlin_cic_lt_color;
    border-left: 4px solid $onlin_cic_lt_color;
    left: 0;
    // animation-play-state: paused;
    &.is-runing {
      animation: circleProgressLoad_left 10s linear ;
      animation-fill-mode: forwards;
    }
    &.is-stop {
      transform: rotate(45deg) !important;
      -webkit-transform: rotate(45deg)!important;
    }
  }
}
.box-wp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FDE9D0 0%, #FFEEDA 100%);
  background: linear-gradient(40deg, #FCBFCD 0%, #FFEEDA 30%);
}

.red-bg-btn {
  font-weight: 500;
  color: #fff;
  width: 126rpx;
  min-width: 126rpx;
  height: 52rpx;
  line-height: 52rpx;
  background: linear-gradient( 79deg, #FF282D 0%, #FF752B 100%);
  border-radius: 48rpx ;
  text-align: center;
  font-size: 24rpx;
  padding: 0;
  border: 0;

  &.is-done {
    background: grey;
  }
}

.head-wp {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 56rpx 20rpx 50rpx 48rpx;
  z-index: 3;

  .tx-btn {
    background:#0079FF;
    width: 144rpx;
    height: 52rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    border-radius: 52rpx;
    margin: 0;
  }
}
.head-row {
  font-weight: bold;
  font-size: 32rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;

  .my-coins {
    position: relative;
    width: 36rpx; 
    height: 36rpx;

    .coin-img {
      position: absolute;
      width: 36rpx; 
      height: 36rpx;
      left:12rpx;
      top: 0;

      &.is-move {
        // animation: run-right-top 1s cubic-bezier(.66, .1, 1, .41);
        // animation: run-right-top 1s cubic-bezier(.08, 0.35,.99,.73);
        animation: run-right-top 0.6s cubic-bezier(.08, 0.35,.50,.73);
        /* animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 ease-out; */
        // animation-fill-mode: forwards;
      }
    }
  }
}
.task-wrr {
  margin-bottom: 150rpx;
  padding: 0 32rpx 32rpx;
  &.after-second {
    margin-bottom: 0;
  }

  .task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    background: #fff;
    border: 1px solid #FFC0C2;
    border-radius: 32rpx;
    margin-top: 20rpx;
    &:first-child {
      margin-top: 0;
    }

    .type-img {
      width: 92rpx;
      min-width: 92rpx;
      height: 92rpx;
      margin-right: 20rpx;
    }
    .t-tit {
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
      font-size: 32rpx;
    }
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  .btn {
    flex: 1;
    border: none;
    font-size: 34rpx;
    font-weight: bold;
    height: 90rpx;
    background: $active_color;
    color: #fff;
    border-radius: 4rpx;
  }
}


 /* //向下走的动画初始及结尾值 */
@keyframes run-right-top {
  0% {
    transform: translateY(0) translateX(0);
  }
  20% {
    transform: translateY(-10px) translateX(15px);
  }
  30% {
    transform: translateY(-20px) translateX(30px) ;
  }
  40% {
    transform: translateY(-30px) translateX(45px) ;
  }
  50% {
    transform: translateY(-35px) translateX(60px);
  }
  60% {
    transform: translateY(-30px) translateX(70px);
  }
  70% {
    opacity: 0.8;
    transform: translateY(-20px) translateX(80px);
  }
  80% {
    opacity: 0.9;
    transform: translateY(-10px) translateX(90px);
  }
  100% {
    opacity: 0;
    transform: translateY(0) translateX(100px);
  }
}
// /* //向右下的动画初始及结尾值 */
// @keyframes run-right-right {
//   0% {
//     transform: translateX(0);
//   }
//   100% {
//     transform: translateX(100px);
//   }
// }

@keyframes circleProgressLoad_right {
  0% {
    -webkit-transform: rotate(-135deg);
  }
  50%,
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes circleProgressLoad_left {
  0%,
  50% {
    -webkit-transform: rotate(-135deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}

@keyframes coinAni {
  0% {
    -webkit-transform: translateY(20px) scale(0);
  }
  30% {
    -webkit-transform: translateY(-20px) scale(1);
  }
  80% {
    -webkit-transform: translateY(-20px) scale(1);
  }
  100% {
    -webkit-transform: translateY(-60px) scale(0);
  }
}

</style>
